﻿<!doctype html>
 <html >
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="/css/common.css">
   <link rel="stylesheet" href="/css/main.css">
   <script type="text/javascript" src="/js/jquery.min.js"></script>
   <script type="text/javascript" src="/js/colResizable-1.3.min.js"></script>
   <script type="text/javascript" src="/js/common.js"></script>
   <script type="text/javascript" src="/layer/layer.js"></script>

     <script>
         $(function () {


           //用户名
           $("[name='username']").blur(function () {
             var username= $("[name='username']").val();
             if (username==""){
               layer.tips('用户名不能为空', '#username', {
                 tips: [1, '#FD482C'],
                 time: 4000
               });
             } else {


               /* alert(username);*/
               $.ajax({
                 url: "/resource/system/user/ajaxUsername",
                 data: {"username": username},
                 type: "post",
                 dataType: "json",
                 success: function (re) {
                   if (re > 0) {
                     /* $("[name='username']").next().html("<font color='red'>用户名已存在</font>");*/
                     layer.tips('用户名已存在', '#username', {
                       tips: [1, '#FD482C'],
                       time: 4000
                     });
                     $("[type='submit']").attr("disabled", "disabled");

                   } else {

                     $("[name='username']").next().html("");
                     $("[type='submit']").removeAttr("disabled");
                   }
                 }
               })

             }
           });

           //真实信息 中文汉字 [\u4e00-\u9fa5]
           //匹配中文 英文 汉字 ^[\u4e00-\u9fa5_a-zA-Z0-9]+$
           //判断长度  [\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}
           $("#realName").blur(function(){
             //创建正则表达式
             var reg=/^[\u4e00-\u9fa5_a-zA-Z0-9_]{3,10}$/;
             var con=$(this).val();
             var re=reg.test(con);
             if (con==""){
               //小tips
               layer.tips('请输入姓名', '#realName', {
                 tips: [1, '#FD482C'],
                 time: 4000
               });
               $("[type='submit']").attr("disabled", "disabled");
             } else {
               if(re){
                 //小tips
                 layer.tips('姓名可用', '#realName', {
                   tips: [1, 'green'],
                   time: 1000
                 });
                 $("[type='submit']").removeAttr("disabled");

               }else{
                 //小tips
                 layer.tips('请输入2-9位的中文、英文、数字', '#realName', {
                   tips: [1, '#FD482C'],
                   time: 40000
                 });
                 $("[type='submit']").attr("disabled", "disabled");
               }
             }

           });

           //密码
           $("#password").blur(function(){
             //创建正则表达式
             var reg=/^[1-9]\d{6,10}$/;
             var con=$(this).val();
             var re=reg.test(con);
             if (con==""){
               //小tips
               layer.tips('密码不能为空', '#password', {
                 tips: [1, '#FD482C'],
                 time: 2000
               });
               $("[type='submit']").attr("disabled", "disabled");
             } else {
             if(re){
               //小tips
               layer.tips('密码可用', '#password', {
                 tips: [1, 'green'],
                 time: 2000
               });
               $("[type='submit']").removeAttr("disabled");

             }else{
               //小tips
               layer.tips('密码是6-10位的数字', '#password', {
                 tips: [1, '#FD482C'],
                 time: 2000
               });
               $("[type='submit']").attr("disabled", "disabled");
             }

           }

           });

           //身份证
           $("#cardId").blur(function(){
             //创建正则表达式
             var reg=/^\d{17}[\d|x]|\d{15}$/;
             var con=$(this).val();
             var re=reg.test(con);
             if (con==""){
               //小tips
               layer.tips('证件号不能为空', '#cardId', {
                 tips: [1, '#FD482C'],
                 time: 2000
               });
               $("[type='submit']").attr("disabled", "disabled");
             } else {
               if(re){
                 //小tips
                 layer.tips('证件号可用', '#cardId', {
                   tips: [1, 'green'],
                   time: 2000
                 });
                 $("[type='submit']").removeAttr("disabled");

               }else{
                 //小tips
                 layer.tips('证件号不可用，重新输入', '#cardId', {
                   tips: [1, '#FD482C'],
                   time: 2000
                 });
                 $("[type='submit']").attr("disabled", "disabled");
               }

             }

           });

           //年龄0-99
           //let reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;//年龄是1-120之间有效
           $("#age").blur(function(){
             //创建正则表达式
             var reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
             var con=$(this).val();
             var re=reg.test(con);
             if(re){
               //小tips
               layer.tips('年龄可用', '#age', {
                 tips: [1, 'green'],
                 time: 2000
               });
               $("[type='submit']").removeAttr("disabled");

             }else{
               //小tips
               layer.tips('年龄不可用，请输入1-120之间的数', '#age', {
                 tips: [1, '#FD482C'],
                 time: 2000
               });
               $("[type='submit']").attr("disabled", "disabled");
             }

           });


           //国内手机号  0?(13|14|15|17|18|19)[0-9]{9}

           $("#phone").blur(function(){
             //创建正则表达式
             var reg=/^0?(13|14|15|17|18|19)[0-9]{9}$/;
             var con=$(this).val();
             var re=reg.test(con);
             if (con==""){
               //小tips
               layer.tips('手机号不能为空,请输入', '#phone', {
                 tips: [1, '#FD482C'],
                 time: 2000
               });
               $("[type='submit']").attr("disabled", "disabled");
             } else {
                   if(re){
                     //小tips
                     layer.tips('手机号可用', '#phone', {
                       tips: [1, 'green'],
                       time: 1000
                     });
                     $("[type='submit']").removeAttr("disabled");

                   }else{
                     //小tips
                     layer.tips('手机号不可用', '#phone', {
                       tips: [1, '#FD482C'],
                       time: 20000
                     });
                     $("[type='submit']").attr("disabled", "disabled");
                   }
             }

           });




         })



     </script>
</head>

<body>
  <div id="forms" class="mt10">
        <div class="box">
          <div class="box_border">
            <div class="box_top"><b class="pl15">添加用户</b></div>
            <div class="box_center">
              <form action="/resource/system/user/add" method="post" class="jqtransform">
               <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                 <tr>
                  <td class="td_right">登录名：</td>
                  <td class=""> 
                    <input type="text"  required  id="username" name="username" class="input-text lh30" size="40"/><span></span>
                  </td>
				  </tr>
				  <tr>
                  <td class="td_right">密码：</td>
                    <td><input type="password" id="password" required name="password" class="input-text lh30" size="40"/>
                    </td>
                    </tr>
					   <tr>
						  <td class="td_right">真实姓名：</td>
						  <td class=""> 
							<input type="text" id="realName" name="realName" required class="input-text lh30" size="40"/>
						  </td>
					  </tr>
					   <tr>
						  <td class="td_right">身份证：</td>
						  <td class=""> 
							<input type="text"  id="cardId" name="cardId" required class="input-text lh30" size="40"/>
						  </td>
					  </tr>
					   <tr>
						  <td class="td_right">年龄：</td>
						  <td class=""> 
							<input type="text" name="age" id="age" required class="input-text lh30" size="10"/>
						  </td>
					  </tr>
                                          <tr>
						  <td class="td_right">手机号：</td>
						  <td class=""> 
							<input type="text" name="phone" id="phone" required class="input-text lh30" size="10"/>
						  </td>
					  </tr>
				<tr>
                  <td class="td_right">性别：</td>
                  <td class="">
                    <input type="radio" name="sex" value="1" checked/> 男
                    <input type="radio" name="sex" value="0"/> 女
                  </td>
				  </tr>


                <tr >
                  <td class="td_right">部门：</td>
                  <td class="">
					 <span class="f2">
                      <div class="select_border"> 
                        <div class="select_containers "> 
                        <select name="deptId" required class="select">
                            <#list allDept as dept>
                                <option value="${dept.deptId}">${dept.deptName}</option>
                            </#list>
                        </select>
                        </div> 
                      </div> 
                    </span>
                  </td>
                 </tr>
                 
				  
				  <tr >
                  <td class="td_right">职称：</td>
                  <td class="">
 
                    <span class="fl">
                      <div class="select_border"> 
                        <div class="select_containers "> 
                        <select name="classsifyId"   required class="select">
                            <#list classsify as class>
                                <option value="${class.classsifyId}">${class.classsifyName}</option>
                            </#list>

                        </select> 
                        </div> 
                      </div> 
                    </span>
                  </td>
                 </tr>
				  <tr >
                  <td class="td_right">角色：</td>
                  <td class="">
 
                    <span class="fl">
                      <div class="select_border"> 
                        <div class="select_containers "> 
                        <select name="roleId" required class="select">

                            <#list allRole as role>
                                <option value="${role.roleId}">${role.roleName}</option>
                            </#list>

                        </select> 
                        </div> 
                      </div> 
                    </span>
                  </td>
                 </tr>
                 <tr>
                  <td class="td_right">状态：</td>
                  <td class="">
                    <input type="radio" value="0" name="status" checked/> 启用
                    <input type="radio" value="1" name="status"/> 冻结
                  </td>
                 </tr>
                   <tr>
                  <td class="td_right">上传头像：</td>
                  <td class="">
                      <img id="img" width="100px" src="">
                      <input type="hidden" id="hiddenPic" name="picAddress">
                      <input id="tripPic" onchange="preview(this)" type="file" class="input-text lh30" size="10" />
                      <button type="button" onclick="uploadPic()" class="btn btn-danger">上传<tton>
                      <span id="picInfo"></span>
                  </td>
                 </tr>

                 <tr>
                   <td class="td_right">&nbsp;</td>
                   <td class="">
                     <input type="submit" name="button" class="btn btn82 btn_save2" value="保存"/>
                    <input type="button" name="button" class="btn btn82 btn_res" onclick="location.href='javascript:history.go(-1)'" value="返回"/>
                   </td>
                 </tr>
               </table>
               </form>
            </div>
          </div>
        </div>
     </div>
   </div>

<script>
    //上传图片
    function uploadPic() {
        //创建formData对象
        var formData = new FormData();
        formData.append("file",$("#tripPic")[0].files[0]);
        //发送ajax
        $.ajax({
            url: "/upload/pic",
            data: formData,
            type: "post",
            dataType: "json",
            success: function (result) {
                if (result.code == 0){
                    // alert(result.data.src)
                    $("#img").attr("src",result.data.src);
                    $("#hiddenPic").val(result.data.src);
                    $("#picInfo").html("上传成功啦！").css("color","green");
                } else {
                    alert(result.msg);
                }
            },
            error: function () {
                alert("您还没有选择图片！")
            },
            contentType: false,
            processData: false
        });
    }

    // 动态显示图片
    function preview(file){
        if (file.files && file.files[0]){
            reader = new FileReader();
            reader.onload = function(evt){
                $("#img").attr("src",evt.target.result);
            }
            reader.readAsDataURL(file.files[0]);
        }

    }
</script>

</body>

</html>